<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D地球</title>
    <style>
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"
    ></script>
  </head>
  <body>
    <div id="allmap"></div>
  </body>
</html>
<script type="text/javascript">
  // GL版本命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  let map = new BMapGL.Map("allmap");
  map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);
  map.enableScrollWheelZoom(true);
  map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式

  // 添加比例尺控件
  let scaleCtrl = new BMapGL.ScaleControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    offset: new BMapGL.Size(100, 10),
  });
  map.addControl(scaleCtrl);

  // 添加缩放控件
  let zoomCtrl = new BMapGL.ZoomControl({
    anchor: BMAP_ANCHOR_BOTTOM_LEFT,
  });
  map.addControl(zoomCtrl);
</script>
